<template>
  <div class="dashboard-container" v-loading="loading">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <TreeTools :treeNode="company" :isRoot="true" @addDepts="addDepts" />
        <el-tree :data="departs" :default-expand-all="true">
          <!-- 传入内容 插槽内容 会循环多次 有多少节点 就循环多少次 -->
          <!-- 作用域插槽 slot-scope="obj" 接收传递给插槽的数据   data 每个节点的数据对象-->
          <TreeTools
            slot-scope="{ data }"
            :treeNode="data"
            @delDepts="getDepartments"
            @addDepts="addDepts"
            @editDepts="editDepts"
          />
        </el-tree>
      </el-card>
      <AddDepts
        ref="addDept"
        :showDialog.sync="showDialog"
        :treeNode="node"
        @addDepts="getDepartments"
      ></AddDepts>
    </div>
  </div>
</template>

<script>
import TreeTools from "./components/tree-tools.vue";
import AddDepts from "./components/add-dept.vue";
import { getDepartmentsAPI } from "@/api/departments";
import { listTotreeData } from "@/utils/index";
export default {
  data() {
    return {
      company: {},
      departs: [],
      showDialog: false,
      node: null, // 记录当前点击的节点
      loading: false, // 用来控制进度弹层的显示和隐藏
    };
  },
  components: {
    TreeTools,
    AddDepts,
  },
  created() {
    this.getDepartments();
  },
  methods: {
    async getDepartments() {
      this.loading = true;
      const { companyName, depts } = await getDepartmentsAPI();
      this.company = { name: companyName, manager: "负责人", id: "" };
      this.departs = listTotreeData(depts);
      this.loading = false;
    },
    // 监听tree-tools中触发的点击添加子部门的事件
    addDepts(node) {
      this.showDialog = true;
      this.node = node;
    },
    // 监听tree-tools中触发的点击编辑子部门的事件
    editDepts(node) {
      this.showDialog = true;
      // 赋值操作的节点
      this.node = node;
      // 在这里调用子组件的方法
      this.$refs.addDept.getDepartmentDetail(node.id);
    },
  },
};
</script>

<style scoped>
.tree-card {
  padding: 30px;
  font-size: 14px;
}
</style>